<template>
  <t-head-menu v-model="menu2Value" theme="dark" height="120px" class="my-menu">
    <template #logo>
      <img
        height="28"
        src="https://tdesign.gtimg.com/site/baseLogo-dark.png"
        alt="logo"
      />
      <ChevronLeftIcon
        class="icon-move"
        v-if="curWindowWidth < NEED_SHOW_ICON_WIDTH && curScrollPage !== 0"
        @click="handleScrollMenu('left')"
      />
    </template>
    <t-row justify="flex-start" style="flex-wrap: nowrap" class="menu-wrapper">
      <t-menu-item :value="item" v-for="item in 16" :key="item">
        菜单{{ item }}
      </t-menu-item>
    </t-row>

    <template #operations>
      <ChevronRightIcon
        class="icon-move"
        v-if="curWindowWidth < NEED_SHOW_ICON_WIDTH&& curScrollPage < curCanScrollPage"
        @click="handleScrollMenu('right')"
      />
      <div class="t-demo-menu--dark">
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="search" /></template>
        </t-button>
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="mail" /></template>
        </t-button>
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="user" /></template>
        </t-button>
        <t-button variant="text" shape="square">
          <template #icon><t-icon name="ellipsis" /></template>
        </t-button>
      </div>
    </template>
  </t-head-menu>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ChevronRightIcon, ChevronLeftIcon } from "tdesign-icons-vue-next";
const menu2Value = ref(1);

// 需要显示icon的最大屏幕宽度
const NEED_SHOW_ICON_WIDTH = 1750;

// 当前屏幕的宽度
const curWindowWidth = ref(window.innerWidth);
// 当前menu应该有的宽度
const curMenuWidth = ref(0);
// 当前的滚动页数
const curScrollPage = ref(0);
// 实际菜单栏的宽度
const trulyMenuWidth = ref(0);
// 当前能够滚动的页数
const curCanScrollPage = computed(() => {
  if (curMenuWidth.value) {
    // 当前藏的部分
    const hideWidth = trulyMenuWidth.value - curMenuWidth.value;
    // 藏的部分除以显示部分的倍数
    return Math.ceil(hideWidth / (curMenuWidth.value))
  }
  return 0;
});

// 初始化以及屏幕变化之后的方法
const initMenuWidth = () => {
  const menuDom = document.querySelector(".my-menu .t-menu");
  // 重置滚动页数
  curScrollPage.value = 0;
  // 重置滚动距离
  menuDom.style.transform = `translateX(0px)`;
  curWindowWidth.value = window.innerWidth;
  const logoWidth = 180;
  const rightWidth = 180;
  // menu宽度应该为减去logo和右侧内容的宽度，再预留一些宽度
  const menuWidth = curWindowWidth.value - (logoWidth + rightWidth + 150);
  menuDom.style.maxWidth = `${menuWidth}px`;
  curMenuWidth.value = menuWidth;
};

// 计算实际的菜单栏宽度
const calTrulyMenuWidth = () => {
  // 将dom拿到
  const menuDom = document.querySelector(".my-menu .t-menu");
  trulyMenuWidth.value = menuDom.clientWidth;
};

// 处理滚动
const handleScrollMenu = (type) => {
  // 每一次移动的距离(实际menu的长度-当前menu的长度)/当前能够滚动的页数
  const eachMove =
    (trulyMenuWidth.value - curMenuWidth.value) / curCanScrollPage.value;
  const menuDom = document.querySelector(".my-menu .t-menu .menu-wrapper");
  if (type === "left") {
    curScrollPage.value--;
    menuDom.style.transform = `translateX(${-curScrollPage.value * eachMove}px)`;
  } else if (type === "right") {
    curScrollPage.value++;
    menuDom.style.transform = `translateX(${
      -curScrollPage.value * eachMove
    }px)`;
  }
};

onMounted(() => {
  calTrulyMenuWidth();
  // 监听窗口变化
  window.addEventListener("resize", initMenuWidth);
  initMenuWidth();
});
</script>

<style lang="less">
.my-menu {
  .t-menu {
    flex: none;
    overflow: hidden;
  }
  .menu-wrapper{
    transition: transform 1s ease;
  } 
  .t-head-menu__inner {
    justify-content: space-between;
  }
}
</style>
<style lang="less" scoped>
.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}
.t-demo-menu--dark {
  .t-button {
    color: #fff;
    &:hover {
      background-color: #4b4b4b;
      border-color: transparent;
      --ripple-color: #383838;
    }
  }
}

.icon-move {
  color: white;
  cursor: pointer;
  font-size: 20px;
  padding: 0 10px;
}
</style>
